<script setup lang="ts">
import { computed, inject, reactive, ref } from "vue";
import { useUser } from "@/store/user";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { UserRegisterRequest } from "../../../generated";
import { storeToRefs } from "pinia";

let user = useUser();
const { registerUser } = storeToRefs(user);
const router = useRouter();
const ruleUser = reactive({
  accountStatus: computed(() => {
    if (registerUser.value.userAccount == "") {
      return "warning";
    }
    return (loginRule.userAccount as RegExp).test(
      registerUser.value.userAccount as string
    )
      ? "success"
      : "error";
  }),
  passwordStatus: computed(() => {
    if (registerUser.value.userPassword == "") {
      return "warning";
    }
    return (loginRule.userPassword as RegExp).test(
      registerUser.value.userPassword as string
    )
      ? "success"
      : "error";
  }),
  checkPasswordStatus: computed(() => {
    if (registerUser.value.checkPassword == "") {
      return "warning";
    }
    return registerUser.value.userPassword == registerUser.value.checkPassword
      ? "success"
      : "error";
  }),
});

const loginRule = reactive({
  userAccount: /^[0-9A-Za-z]{10,16}$/,
  userPassword:
    /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/,
});

function checkRuleAccount() {
  if (registerUser.value.userAccount == "") {
    return false;
  }
  if (
    (loginRule.userAccount as RegExp).test(
      registerUser.value.userAccount as string
    )
  ) {
    return true;
  } else {
    return false;
  }
}

function checkRulePassword() {
  if (registerUser.value.userPassword == "") {
    return false;
  }
  if (
    (loginRule.userPassword as RegExp).test(
      registerUser.value.userPassword as string
    )
  ) {
    return true;
  } else {
    return false;
  }
}

function checkRuleCheckPassword() {
  if (!registerUser.value.userPassword) {
    return false;
  }
  if (registerUser.value.userPassword == registerUser.value.checkPassword) {
    return true;
  } else {
    return false;
  }
}

function goToUserInfo() {
  if (!checkRuleAccount()) {
    message.error("账号错误");
    return;
  }
  if (!checkRulePassword()) {
    message.error("密码错误");
    return;
  }
  if (!checkRuleCheckPassword()) {
    message.error("两次密码不一致");
    return;
  }
  user.nextPro();
  router.push({
    path: "/register/userInfo",
  });
}
</script>

<template>
  <a-space direction="vertical" size="large" style="width: 100%">
    <a-form :model="registerUser" :layout="'vertical'" style="width: 100%">
      <a-form-item
        field="userAccount"
        label="账号:"
        :help="'请输入10-16位含数字字或母的账号'"
        :validate-status="ruleUser.accountStatus"
      >
        <a-input
          class="input"
          v-model="registerUser.userAccount"
          placeholder="请输入你的账号"
          oncopy="return false"
        />
      </a-form-item>
      <a-form-item
        field="userPassword"
        label="密码:"
        :help="'请输入至少六个字符,包含大写字母,小写字母,数字,特殊字符的密码'"
        :validate-status="ruleUser.passwordStatus"
      >
        <a-input
          class="input"
          v-model="registerUser.userPassword"
          type="password"
          placeholder="请输入你的密码"
          oncopy="return false"
        />
      </a-form-item>
      <a-form-item
        field="checkUserPassword"
        label="校验密码:"
        :help="'两次密码输入要一致'"
        :validate-status="ruleUser.checkPasswordStatus"
      >
        <a-input
          class="input"
          v-model="registerUser.checkPassword"
          type="password"
          placeholder="请再次输入你的密码"
          oncopy="return false"
        />
      </a-form-item>
      <a-form-item>
        <a-button class="button" @click="goToUserInfo" type="primary"
          >下一步
        </a-button>
      </a-form-item>
    </a-form>
  </a-space>
</template>

<style scoped>
.input {
  outline: 0;
  width: 100%;
  margin: 0 0 15px;
  padding: 10px 10px 5px 10px;
  box-sizing: border-box;
  font-size: 20px;
  border-radius: 1ch;
  border: 1px solid #f5f5f5;
}

.button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  width: 100%;
  border: 0;
  padding: 15px;
  font-size: 14px;
  cursor: pointer;
  height: 40px;
  border-radius: 1ch;
}

.button:active {
  background: #74c0fc;
}
</style>
